<template>
    <el-row class="warp">
        <el-col class="publicNav" :span="3" style="height:100%;">
            <router-link to="/layout/system" >系统管理</router-link>
            <router-link class="newnava" to="/layout/systemversion" >网卡配置</router-link>
            <router-link to="/layout/systemdetails" >系统配置</router-link>
        </el-col>
        <el-col :span="21" style="height:100%;">
          <div class="main-contents-box">
            <div class="main-contents-main">
                <div class="systemversion">
                    <div class="system-content" style="">
                          <div class="system-content-title" style="">
                              网卡设置
                          </div>
                          <el-row :span="24">
                              <el-col :span="12">
                               <div class="network-main">
                                    <div class="networktitle">网卡一</div>
                                    <ul>
                                        <li>
                                            <div class="network-title">
                                                IP地址:
                                            </div>
                                            <div class="network-content">
                                              <div class="systemaddress ip1"></div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="network-title">
                                              子网掩码:
                                            </div>
                                            <div class="network-content">
                                              <div class="systemaddress mask1"></div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="network-title">
                                              默认网关:
                                            </div>
                                            <div class="network-content">
                                              <div class="systemaddress gateway1"></div>
                                            </div>
                                        </li>
                                        <!-- <li>
                                            <div class="network-title">
                                                服务器地址:
                                            </div>
                                            <div class="network-content">
                                              <div class="systemaddress sever"></div>
                                            </div>
                                        </li> -->
                                    </ul>
                                </div>
                              </el-col>
                              <el-col :span="12">
                                  <div class="network-main">
                                    <div class="networktitle">网卡二</div>
                                    <ul>
                                        <li>
                                            <div class="network-title">
                                                IP地址:
                                            </div>
                                            <div class="network-content">
                                              <div class="systemaddress ip2"></div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="network-title">
                                              子网掩码:
                                            </div>
                                            <div class="network-content">
                                              <div class="systemaddress mask2"></div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="network-title">
                                              默认网关:
                                            </div>
                                            <div class="network-content">
                                              <div class="systemaddress gateway2"></div>
                                            </div>
                                        </li>
                                        <!-- <li>
                                            <div class="network-title">
                                                服务器地址:
                                            </div>
                                            <div class="network-content">
                                              <div class="systemaddress sever"></div>
                                            </div>
                                        </li> -->
                                    </ul>
                                </div>
                              </el-col>
                          </el-row>
                          <el-row :span="24">
                            <el-col :span="24">
                                <div class="button-box" style="height:40px;">
                                  <el-button type="primary" @click="set_network" >保存</el-button>
                                </div>
                            </el-col>
                          </el-row>
                    </div>
                </div>
            </div>
          </div>
        </el-col>
    </el-row>
</template>
<script>
export default {
  name: 'system',
  data () {
    return {
        
     }
  },
  methods:{
      get_pwd(){
          let  pwd; 
          $.ajax({
              url:'../cfg/password.json',
              type:'GET',
              cache:false,
              async: false,
              dataType:'text',
              success:function(result){
                  let data = eval("("+result+")");
                  pwd = data.password;
              },
              error:function(realdata){                           
              }
          })
          return pwd;
      },
      check_pwd(){
          let username = window.sessionStorage.getItem('username');
          let password = window.sessionStorage.getItem('password');
          let pwd = this.get_pwd();
          if(username == "admin"){
              if(password != pwd){
                  this.$message({
                      message: '密码做了更改,请重新登录!',
                      type: 'info',
                      center:true,
                      showClose: true
                  });
                  this.loginout();
              }
          } 
      },
      loginout(){
          window.sessionStorage.removeItem("username");
          window.sessionStorage.removeItem("password");
          this.set_log("用户退出");
          this.$router.push("/login");
      },
      set_log(str){//用户操作日志
          let  msg= {"cmd":"CGI_LOG_SET_OPT","content":str};
          $.ajax({
              url:"cgi-bin/main.cgi",
              contentType: "application/json;charset=utf-8",
              type:"post",
              data:JSON.stringify(msg),
              success:function(msg){           
              }
          })
      },
      set_network(){
          this.$confirm('此操作将修改系统配置导致设备重启, 是否继续?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
              let that = this;
              let msg = "";
              let ip1 = this.get_msg($(".ip1 input"));
              let mask1 = this.get_msg($(".mask1 input"));
              let gateway1 = this.get_msg($(".gateway1 input"));
              let ip2 = this.get_msg($(".ip2 input"));
              let mask2 = this.get_msg($(".mask2 input"));
              let gateway2 = this.get_msg($(".gateway2 input"));

              if(this.isValidIP(ip1)==false||ip1=="0.0.0.0"||ip1=="255.255.255.255"){
                  that.$message({
                      type: 'error',
                      message: '网卡一中IP地址错误,请重新填写!'
                  });
                  return false;
              }

              if(this.checkMask(mask1) == false){
                  that.$message({
                      type: 'error',
                      message: '网卡一中子网掩码错误,请重新填写!'
                  });
                  return false;
              }

              if(gateway1 != "..."){
                  if(this.isValidIP(gateway1)==false){
                      that.$message({
                          type: 'error',
                          message: '网卡一默认网关错误,请重新填写!'
                      });
                      return false;
                  }
              }else{
                  gateway1 = "";
              }



              if(ip1==gateway1){
                  that.$message({
                      type: 'error',
                      message: '网卡一中IP地址与默认网关不能一致,请重新填写!!'
                  });
                  return false;
              }


              if(this.isValidIP(ip2)==false||ip2=="0.0.0.0"||ip2=="255.255.255.255"){
                  that.$message({
                      type: 'error',
                      message: '网卡二中IP地址错误,请重新填写!'
                  });
                  return false;
              }

              if(this.checkMask(mask2) == false){
                  that.$message({
                      type: 'error',
                      message: '网卡二中子网掩码错误,请重新填写!'
                  });
                  return false;
              }

              if(gateway2 !="..."){
                  if(this.isValidIP(gateway2)==false){
                      that.$message({
                          type: 'error',
                          message: '网卡二默认网关错误,请重新填写!'
                      });
                      return false;
                  }
              }else{
                  gateway2 = "";
              }


              if(ip2==gateway2){
                  that.$message({
                      type: 'error',
                      message: '网卡二中IP地址与默认网关不能一致,请重新填写!!'
                  });
                  return false;
              }
              
              if(gateway1 == "" && gateway2 == "" ){
                  msg = {"eth0":{"ip":ip1,"mask":mask1},"eth1":{"ip":ip2,"mask":mask2}};
              }else if(gateway1 != "" && gateway2 == "" ){
                  msg = {"eth0":{"ip":ip1,"mask":mask1,"gateway":gateway1},"eth1":{"ip":ip2,"mask":mask2}};
              }else if(gateway1 == "" && gateway2 != "" ){
                  msg = {"eth0":{"ip":ip1,"mask":mask1},"eth1":{"ip":ip2,"mask":mask2,"gateway":gateway2}};
              }else if(gateway1 != "" && gateway2 != ""){
                  msg = {"eth0":{"ip":ip1,"mask":mask1,"gateway":gateway1},"eth1":{"ip":ip2,"mask":mask2,"gateway":gateway2}};
              }

              // let msg = {"eth0":{"ip":ip1,"mask":mask1,"gateway":gateway1},"eth1":{"ip":ip2,"mask":mask2,"gateway":gateway2}};

              //console.log(msg);
              $.ajax({
                  url:"cgi-bin/JHSetNetwork.cgi",
                  contentType: "application/json;charset=utf-8",
                  type:"post",
                  async:false,
                  cache:false,
                  data:JSON.stringify(msg),
                  success:function(res){
                      //console.log(eval("("+res+")"));
                      let data =eval( "("+res+")" );
                      if(data.state == 1){
                          /*that.$message({
                            message: '网卡信息设置成功,设备即将重启!',
                            type: 'success',
                            center:true,
                            showClose: true
                          });*/

                          that.sleep(3000);
                      }else{
                        that.$message({
                            message: '网卡信息设置失败!',
                            type: 'error',
                            center:true,
                            showClose: true
                          });
                      } 
                  }
              })
          }).catch(() => {
               
          });
      },
      get_network(){
        console.log("获取network");
        let that = this;
          if(window.sessionStorage.getItem('username')=="zyl"){
            this.$ajax.get("./static/network.json").then(function(res){
                let eth0_info = res.data.eth0;
                let eth1_info = res.data.eth1;


                that.set_info($(".ip1 input"),eth0_info.ip);
                that.set_info($(".mask1 input"),eth0_info.mask);
                that.set_info($(".gateway1 input"),eth0_info.gateway);
                that.set_info($(".ip2 input"),eth1_info.ip);
                that.set_info($(".mask2 input"),eth1_info.mask);
                that.set_info($(".gateway2 input"),eth1_info.gateway);  
            })   
          }else{
              this.$ajax.get("./cfg/networkcard.json").then(function(res){
                  
                  let eth0_info = res.data.eth0;
                  let eth1_info = res.data.eth1;

                  console.log(eth0_info);
                  console.log(eth0_info.ip);
                  console.log(eth0_info.mask);
                  console.log(eth0_info.gateway);

                  console.log(111);
                  console.log(eth1_info);
                  console.log(eth1_info.ip);
                  console.log(eth1_info.mask);
                  console.log(eth1_info.gateway);

                
                  that.set_info($(".ip1 input"),eth0_info.ip);
                  that.set_info($(".mask1 input"),eth0_info.mask);

                  if(eth0_info.gateway != undefined){
                      that.set_info($(".gateway1 input"),eth0_info.gateway);
                  }
                  
                  that.set_info($(".ip2 input"),eth1_info.ip);
                  that.set_info($(".mask2 input"),eth1_info.mask);

                  if(eth1_info.gateway != undefined){
                      that.set_info($(".gateway2 input"),eth1_info.gateway);
                  }
                  
              })
          }
      },
      set_reboot(){
          $.ajax({
              url:"cgi-bin/JHReboot.cgi",
              contentType: "application/json;charset=utf-8",
              type:"post",
              async:false,
              cache:false,
              data:JSON.stringify(""),
              success:function(res){
                 
              }
          })
      },
      sleep(num){
          let now = new Date();
          let exit_ime = now.getTime() + num;
          while(true){
              now = new Date();
              if(now.getTime() > exit_ime){
                  this.set_reboot();
                  return;
              }
          } 
      },
      get_msg(obj){
          var str='';
          obj.each(function(){
               str += $(this).val() +'.';
          })

          let str_info = str.substring(0,str.length-1);
          return str_info;

      },
      set_info(obj,str){
          //let str_info = str.substring(0,str.length-1);
          let arr = new Array();
          arr = str.split(".");
          $.each(arr,function(i,value){
             let thisi=i;
             obj.each(function(i,value){
                if(thisi==i){
                    $(this).val(arr[thisi]);
                }
             })
          })
      },
      checkMask(mask){/*判断mask是否正确*/
          var obj=mask;  
          var exp=/^(254|252|248|240|224|192|128|0)\.0\.0\.0|255\.(254|252|248|240|224|192|128|0)\.0\.0|255\.255\.(254|252|248|240|224|192|128|0)\.0|255\.255\.255\.(254|252|248|240|224|192|128|0)$/; 
          var reg = obj.match(exp);
          if(reg==null){
              return false;//非法
          }else{
              return true;//合法
          }
      },
      isValidIP(ip) {/*判断IP格式时候正确*/
        var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
        return reg.test(ip);
      } 
  },
  mounted(){
      this.check_pwd(); 
      let that=this;
      $(function(){
          $('.ip1').html('').ipInput("IP");
          $('.mask1').html('').ipInput("IP");
          $('.gateway1').html('').ipInput("IP");
          $('.ip2').html('').ipInput("IP");
          $('.mask2').html('').ipInput("IP");
          $('.gateway2').html('').ipInput("IP");
          //$('.sever').html('').ipInput("IP");
          that.get_network();
      });
  },
  created(){

  }

}
</script>
<style>
.systemversion{
  width: 90%;
  height: 100%;
  margin: auto;
}
.systemaddress{
  border: 1px solid #ddd;
  width: 150px;
  margin: auto;
  border-radius: 3px;
  height: 25px;
  margin-top: 7px;
  left: 50%;
  margin-left: -25%;
  position: relative;
  left: 50%;
}
.systemaddress input{
  width: 30px;
  text-align: center;
  background: transparent;
  border-radius: 3px;
  margin-top: 4px;
  border: 0px;
}
.systemaddress span:last-child{
  display: none;
}
.networktitle{
  width:100%;
  height:40px;
  line-height: 40px;
  text-align: center;
  margin-top: 5px;
  background: #f2f2f2;
}
.network-main{
  width:350px;
  height:auto;
  border-radius:10px;
  overflow:hidden;
  margin: auto;
  margin-top: 30px;
  padding-bottom: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 10px;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
}
.network-main ul {
  width: 100%;
  height: auto;
}
.network-main ul li{
  width: 100%;
  border-bottom: 1px solid #ebeef5;
  height: 39px;
}
.network-main ul li .network-content{
  float: left;
  position: relative;
}
.network-main ul li .network-title{
  width: 120px;
  height: 100%;
  line-height: 39px;
  text-align: center;
  font-size: 14px;
  float: left;
  border-right: 1px solid #ebeef5;
  color: #606266;
}
.button-box{
  width:100;
  height:40px;
  line-height: 40px;
  margin-top: 20px;
  text-align:center;
}
.button-box .el-button{
  padding: 8px 35px;
  font-size: 16px;
  letter-spacing: 2px;
}
.sys-btn{
  float:right;
  margin-right: 30px;
  margin-top: 20px;
}
.system-content{
  height:450px;
  width:100%;
  margin:auto;
  border:1px solid #ebeef5;
  border-radius:10px;
  box-shadow:1px 1px 15px #e6e6e6;
  margin-top: 50px;
}
.system-content-title{
  width:100%;
  background:#f2f2f2;
  text-align: center;
  height:50px;
  line-height: 50px;
  font-size: 20px;
  letter-spacing: 2px;color:#606266;
}

</style>
